<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <meta http-equiv="Content-Language" content="pt-br" />
            <title>Daniel Martins - Fotografo</title>
            <link rel="stylesheet" type="text/css" href="../../includes/css/style.css"/>
            <link rel="stylesheet" type="text/css" href="../../includes/css/purr.css"/>
            <link rel="stylesheet" type="text/css" href="../../includes/css/slide.css"/>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/jquery-1.7.1.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/jquery-ui.min.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/funcoes.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/slide.js"></script>
            <link rel="stylesheet" type="text/css" href="../../includes/css/supersized.css"/>
            <link rel="stylesheet" type="text/css" href="../../includes/css/supersized.shutter.css"/>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/supersized.3.2.7.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/jquery.easing.1.3.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/supersized.shutter.min.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/vendor/jquery.ui.widget.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/tmpl.min.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/load-image.min.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/bootstrap.min.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/bootstrap-image-gallery.min.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/jquery.iframe-transport.jss"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/jquery.fileupload.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/jquery.fileupload-ip.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/jquery.fileupload-ui.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/locale.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/main.js"></script>
            <link rel="stylesheet" type="text/css" href="../../includes/css/album.css"/>
            <link rel="stylesheet" type="text/css" href="../../includes/css/contact.css"/>
            <link rel="stylesheet" type="text/css" href="../../includes/css/client.css"/>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/album.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/contact.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/client.js"></script>
            <script language="JavaScript" type="text/javascript" src="../../includes/js/jquery.simplemodal.js"></script>

<style type="text/css">
.a {
	font-size: 12px;
	color: #C60;
	border: thin outset #CCC;
}
.template-download, .template-upload {
        background: #fff;
        border-radius: 21px; 
        -moz-border-radius: 10px; 
        -webkit-border-radius: 10px;
        float: left;
        border: 1px solid #C4C4C4;
        margin: 5px; 
        width: 200px;
        height: 200px;
        top: 50%;
        left: 50%;
}

.template-download:hover, .template-upload:hover{
	box-shadow:3px 4px 10px #800000;        
        }
.imagemTumb{
            font-size: 9pt; 
            color: #666;
            margin: 15px;
}
        
.btn-deletar{
                   background-color:#da4f49;
                   background-image:-moz-linear-gradient(top, #ee5f5b, #bd362f);
                   background-image:-ms-linear-gradient(top, #ee5f5b, #bd362f);
                   background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
                   background-image:-webkit-linear-gradient(top, #ee5f5b, #bd362f);
                   background-image:-o-linear-gradient(top, #ee5f5b, #bd362f);
                   background-image:linear-gradient(top, #ee5f5b, #bd362f);
                   background-repeat:repeat-x;
                   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', 
                       endColorstr='#bd362f', 
                       GradientType=0);
                   border-color:#bd362f #bd362f #802420;
                   border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
                   filter:progid:dximagetransform.microsoft.gradient(enabled=false);
                   color: #fff;
                   width: 100px;
                   height: 25px;
                   padding-left: 10px;
                   text-align: center;}
        .btn-deletar:hover,
        .btn-deletar:active,
        .btn-deletar.active,
        .btn-deletar.disabled,
        .btn-deletar[disabled]{background-color:#bd362f;}
        


</style>
        </head>
<body>
    <div class="page-header">
        <h1>Gerenciador de imagens</h1>
    </div>
    <br>
    <!-- The file upload form used as target for the file upload widget -->
    <form id="fileupload" action="uploads" method="post" enctype="multipart/form-data">
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="span7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button" style="margin-right: 5px;">
                    <i class="icon-plus icon-white"></i>
                    <span>Adicionar</span>
                    <input type="file" name="files[]" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                    <span>Upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>Cancelar</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="icon-trash icon-white"></i>
                    <span>Deletar</span>
                </button>
                <input type="checkbox" class="toggle">
            </div>
            <div class="span5">
                <!-- The global progress bar -->
                <div class="progress progress-success progress-striped active fade">
                    <div class="bar" style="width:0%;"></div>
                </div>
            </div>
        </div>
        <!-- The loading indicator is shown during image processing -->
        <div class="fileupload-loading"></div>
        <br>
        <!-- The table listing the files available for upload/download -->
        <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
    </form>
    <br>
    <div class="well">
    <h3> Notas</h3>
        <ul>
            <li>O tamanho m&aacute;ximo para o upload dos arquivos &eacute; de <strong>5MB</strong> (Se necess&aacute;rio mude a resolu&ccedil;&atilde;o da imagem).</li>
            <li>Apenas imagens tipo (<strong>JPG, GIF, PNG</strong>) s�o permitidos.</li>            
            <li>Voc&ecirc; pode <strong>arrastar &amp; soltar</strong> da sua &aacute;rea de trabalho para sua webpage com Google Chrome, Mozilla Firefox and Apple Safari.</li>
        </ul>
    </div>

<!-- modal-gallery is the modal dialog used for the image gallery -->
<div id="modal-gallery" class="modal modal-gallery hide fade">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a>
        <h3 class="modal-title"></h3>
    </div>
    <div class="modal-body"><div class="modal-image"></div></div>
    <div class="modal-footer">
        <a class="btn modal-download" target="_blank">
            <i class="icon-download"></i>
            <span></span>
        </a>
        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
            <i class="icon-play icon-white"></i>
            <span></span>
        </a>
        <a class="btn btn-info modal-prev">
            <i class="icon-arrow-left icon-white"></i>
            <span></span>
        </a>
        <a class="btn btn-primary modal-next">
            <span></span>
            <i class="icon-arrow-right icon-white"></i>
        </a>
    </div>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade" style="padding: 10px 5px 8px 15px; vertical-align: middle;">
        <td>
            <div class="preview"><span class="fade"></span></div>
            <!--X<div class="name"><span>{%=file.name%}</span></div>-->
            <div class="size"><span>{%=o.formatFileSize(file.size)%}</span></div>
            {% if (file.error) { %}<!-- abre tratamento de erro -->
                <td class="error" colspan="2">
                    <span class="label label-important">{%=locale.fileupload.error%}</span>
                    {%=locale.fileupload.errors[file.error] || file.error%}
                </td><!-- fecha tratamento de erro -->
            {% } else if (o.files.valid && !i) { %}
    <div class="progress progress-success progress-striped active" style="width: 100%">
                <div class="bar" style="width:0%;"></div>
            </div>
            <div class="start" style="float: left; margin-left: 5px">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>{%=locale.fileupload.start%}</span>
                </button>
                {% } %}
            </div>
            {% } %}        
            <div class="cancel" style="float: left;margin-left: 5px">{% if (!i) { %}
                <button class="btn btn-warning">
                <span>{%=locale.fileupload.cancel%}</span>
            </button>
            {% } %}
            </div>
        </td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <div class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
        <div class="preview" style="margin: 10px;">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
                <HR SIZE="2">
                <div class="delete" style="margin-top: 2px; background: #f4f4f4; left: 50%;">
                    <button class="btn btn-danger"  data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}" title="">
                        <i class="icon-trash icon-white"></i>
                        <span>{%=locale.fileupload.destroy%}</span>
                    </button>
                    <input type="checkbox" name="delete" value="1">
                </div><!-- Delete -->
                {% } %}
            </div><!-- preview -->
        {% } %}
    </div><!-- template-download -->
{% } %}
</script>
</body></html>